<template>
	<view class="gender-title">
		请选择宝宝性别
	</view>
	<view class="gender-option">
		<view class="gender-option-content" :class="{ active: selectedGender === '1' }" @click="selectGender('1')">
			<uni-icons class="boy" color="#00aaff" type="contact" size="100"></uni-icons>
		</view>
		<view class="gender-option-content" :class="{ active: selectedGender === '0' }" @click="selectGender('0')">
			<uni-icons class="girl" color="pink" type="contact-filled" size="100"></uni-icons>      
		</view>
	</view>
	<view class="gender-text">
		<view class="gender-text-left" @click="selectGender('1')">男孩</view>
		<text class="gender-text-right" @click="selectGender('0')">女孩</text>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const selectedGender = ref('');

const selectGender = (gender) => {
	selectedGender.value = gender;
	uni.navigateTo({
		url: `/pages/baby/information2/information2?gender=${gender}`
	});
}
</script>

<style>
.gender-title{
	margin-bottom: 15px;
	font-size: 16px;
	padding: 20px;
	text-align: center;
}     
.gender-option {
	display: flex;
	justify-content: space-around;
}
.gender-option-content{
	background-color: #f5f5f5;
	padding: 20rpx 20rpx;
	border-radius: 30px;
}
.gender-text {
	font-size: 18px;
	font-weight: bold;
	display: flex;
	justify-content: space-around;
  
}
.gender-text-left{
	color: #00aaff;	
}
.gender-text-right{
	color: pink;	
}

.gender-option-content.active {
	border: 2px solid;
	border-color: #00aaff;
}

.gender-option-content.active:last-child {
	border-color: pink;
}
</style>
